<html>
	<head>
        <title>AirCollection</title>
        <link href="lib/stylesample.css" rel="stylesheet" type="text/css"/>
		<link href="lib/style/collection.css" rel="stylesheet" type="text/css">
		<script type="application/x-shockwave-flash" src="lib/air/aircore.swf"></script>
		<script type="application/x-shockwave-flash" src="lib/air/as3corelib.swf"></script>
        <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
        <script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
        <script type="text/javascript" src="lib/air/AIRLocalizer.js"></script>
        <script type="text/javascript" src="lib/air/AIRMenuBuilder.js"></script>
		<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="lib/jquery/jquery-ui-1.7.3.min.js"></script>
		<script type="text/javascript" src="lib/scripts/config.js"></script>
		<script type="text/javascript" src="lib/scripts/release.js"></script>
		<script type="text/javascript" src="lib/scripts/jq.js"></script>
		<script type="text/javascript" src="lib/scripts/sql.js"></script>
		<script type="text/javascript" src="lib/scripts/global_functions.js"></script>
		<script type="text/javascript" src="lib/scripts/ajax_calls.js"></script>
	</head>

    <body>
    	<!-- Header -->
    	<div id="header">	
    		<img class="headerIcon" src="icons/icon_32.png"/> AirCollection
    	</div>
		<!-- Ajax busy image -->
		<div id="busy" class="tooltip" title="Bezig met laden gegevens.">
			<img src="/lib/img/ajax-loader_sm.gif" id="loader" />
		</div>
		<!-- Buttons left botom corner -->
		<div id="quit" class="tooltip" title="AirCollection afsluiten."></div>
		<div id="info" class="tooltip" title="Over AirCollection"></div>
		<!-- Tabs -->
		<div id="tabs">
			<!-- Menu items -->
			<ul id="menu">
				<div class="menuItem"><li><a href="#showList" class="menuList"><img src="lib/img/list.png" alt="list" class="menuImg" title="Klik voor lijstweergave"/></a></li></div>
				<div class="menuItem"><li><a href="#search" class="menuSearch"><img src="lib/img/find.png" alt="find" class="menuImg" title="Klik voor nieuw item"></a></li></div>
				<div class="configButton"><li><a href="#config" class="menuConfig tooltip" title="Configureer AirCollection"><div style="width:24px;height:24px"></div></a></li></div>
				<div class="menuItem"><img src="lib/img/add.png" id="dropbox" class="shade" /></div>
			</ul>
			<!-- View list with releases -->
			<div id="showList" class="main show">
				<div class="releaseTitle">Releases
					<span class="rightCombo">selecteer:
						<select id="combo">
							<!--Filled by programming (combo-options)-->
						</select>
					</span>
				</div>
				<div id="releaseBlock">
					<!--Filled by programming (Releases)-->
				</div>
			</div>
			<!-- Zoek albumscherm -->
			<div id="search" class="main">
				<div id="searchHeader">
					<table>
						<tr><td>Artist</td><td><input type="text" value="" class="textInput" id="inpArtist" /></td></tr>
						<tr><td>Album </td><td><input type="text" value="" class="textInput" id="inpAlbum" /></td></tr>
					</table>
					<button id="data">Gegevens</button>
				</div>
				<div id="release">
					<div class="releaseTitle">Album toevoegen</div>
					<!-- Will after search be filled with releases and seected release -->
					<div class="text">
					<p>Om een album toe te voegen vult u de artiestnaam, albumnaam of beide in.<br />
					U krijgt dan een lijst met bijvoorbeeld alle releases van een artiest. Selecteer de release welke u wilt bekijken.<br />
					Nu krijgt u alle titels van deze release te zien incl de albumhoes</p>
					<p>
					Vervolgens kunt u de afbeelding slepen naar het toevoegicoontje.</p>
					</div>
				</div>
				<!-- Cover image -->
				<img src="lib/img/nopic.png" id="cover" title="sleep de afbeelding om toe te voegen"/>
			</div>
			<!-- Configuration -->
	        <div id="config" class="main">
		        <div class="releaseTitle">
		            Configuratie
		        </div>
		        <div id="releaseBlock">
			        <p>sql bestand <input type="text" id="txtSQL"/></p>
					<fieldset id="collapse">
			        	<legend><input type="checkbox" id="checkLyrics"/>Lyrics</legend>
					</fieldset>
					<fieldset>
						<legend><input type="checkbox" id="checkConcert"/>Concertinfo</legend>
						ip: <input type="text" id="txtIP"/><br />
						location: <input type="text" id="txtLocation"/><br />
						country: <input type="text" id="txtCountry"/><br />
					     <button id="getLocation" class="tooltip" title="IP gegevens ophalen.">Ophalen</button>
					</fieldset>
			        <p>
			            <button id="saveConfig" class="tooltip" title="Wijzigingen opslaan">
			                Opslaan
			            </button>
			        </p>
				</div>			
			</div>
        </div>
		<!-- Alertmessages and tooltips -->
		<div id="alertMessage" title="Melding"></div>
		<div id="lyricBox" title="Songtext"></div>
		<div id="tooltip"></div>
    </body>
</html>